<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<wd-navbar left-arrow @click-left="handleClickLeft" fixed title="视频播放"></wd-navbar>
			<view class="container">
				<div class="dialog-video">
					<video v-if="show" id="videoEle" class="video-box" :src="videoData" controls autoplay />
				</div>
			</view>
		</wd-config-provider>
	</app-page>
</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue';
	import { TUIGlobal } from '@tencentcloud/universal-api';
	import { onLoad, onReady } from '@dcloudio/uni-app';


	export default defineComponent({
		name: '',
		components: {},
		setup(props, ctx) {
			// 日间light、夜间dark主题
			const theme = ref('light');
			const videoData = ref();
			const show = ref(false);
			const videoContext = ref();
			onLoad((option : any) => {
				videoData.value = option && option.videoUrl;
				show.value = true;
			});

			onReady(() => {
				show.value = true;
				videoContext.value = TUIGlobal.createVideoContext('videoEle');
			});
			const handleClickLeft = () => {
				uni.navigateBack()
			}
			return {
				theme,
				videoData,
				show,
				videoContext,
				handleClickLeft,
			};
		}
	});
</script>

<style lang="less" scoped>
	.container {
		.dialog-video {
			position: fixed;
			z-index: 2;
			width: 100vw;
			height: calc(100vh - 44px);
			background: rgba(#000, 0.6);
			top: 44px;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.video-box {
				position: absolute;
				width: 100vw;
				height: 100vh;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}
		}
	}
</style>